<template>
  <div>
    <el-row>
      <!--    span总和为24    -->
      <el-col :span="8">
        <el-card class="box-card">
          <div class="user">
            <img src="@/assets/images/17.png"/>
            <div class="userinfo">
              <p>Admin</p>
              <p class="access">超级管理员</p>
            </div>
          </div>
          <div class="login-info">
            <p>上次登录时间:<span>2024-6-18</span></p>
          </div>
        </el-card>
        <el-card class="box-card" style="margin-top: 20px">
          <el-table :data="tableData" stripe style="width: 100%;">
            <el-table-column prop="date" label="日期" width="120"></el-table-column>
            <el-table-column prop="name" label="姓名" width="120"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-card class="box-card" style="margin-top: 20px">
        <!--统计图-->
        <div ref="echarts1" style="height: 200px;">
        </div>
      </el-card>
      <el-col :span="16">
        <el-card class="box-card">
          <div ref="echarts2" style="height: 350px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'firstPage',
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    };
  },mounted(){
    var myEcharts1 = echarts.init(this.$refs.echarts1);
    var myEcharts2 = echarts.init(this.$refs.echarts2);

    var option1 = {
      title:{
        text: 'Echarts 入门示例'
      },
      tooltip: {},
      legend:{
        data:['销量']
      },
      xAxis:{
        data:['1','2','3','4','5','6']
      },
      yAxis:{},
      series:[
        {
          name:'销量',
          type:'bar',
          data:[5,10,15,20,25,30]
        }
      ]
    };
    var option2 = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [1, 0, 5, 0, 22, 1, 0],
          type: 'line'
        }
      ]
    };

    myEcharts1.setOption(option1);
    myEcharts2.setOption(option2);
  }
}
</script>

<style lang="less" scoped>
.user {
  padding-bottom: 20px;
  margin-bottom: 10px;
  border-bottom: 1px solid #999999;
  display: flex;
  align-items: center;

  img {
    margin-left: 30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
  }

  .userinfo {
    margin-left: 30px;

    .name {
      font-size: 30px;
      margin-bottom: 10px;
    }

    .access {
      color: #999;
      margin-top: 0px;
    }
  }
}

.login-info {
  p {
    font-size: 14px;
    color: #999999;
    line-height: 20px;

    span {
      color: #666666;
      margin-left: 10px;
    }
  }
}
</style>
